<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { defineProps } from 'vue';
const props = defineProps(['showwhat']);
//console.log('面包屑要显示的标题：', props.showwhat);
</script>

<template>
  <!-- 面包屑 -->
  <el-breadcrumb class="position" separator="/" :separator-icon="ArrowRight">
    <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
    <el-breadcrumb-item v-for="(item, index) in props.showwhat" :key="index">
      <template v-if="index === props.showwhat.length - 1">
        <span :style="{ fontWeight: 300, color: '#2196f3', pointerEvents: item.disabled ? 'none' : 'auto', }">{{
          item.title }}</span>
      </template>
      <template v-else>
        <a :style="{ fontWeight: 300, pointerEvents: item.disabled ? 'none' : 'auto', }" :href="item.url">{{ item.title
        }}</a>
      </template>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style lang="scss" scoped>
.position {
  // padding-left: 1%;
  // padding-top: 1%;

  :deep(.el-breadcrumb__inner) {
    font-size: vw(18);
    font-weight: 300;
    color: #6f6f6f;
  }

  :deep(.el-breadcrumb__separator) {
    font-size: vw(18);
    font-weight: 300;
  }

  :deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
    color: #6f6f6f;
    font-weight: 300;
    text-decoration: none;
    transition: var(--el-transition-color);
  }
}
</style>
